<template>
  <Transition name="fade">
    <div v-if="show" class="toast">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
          <path d="m9 12 2 2 4-4"/>
        </svg>
      </div>
      <span class="message">{{msg}}</span>
    </div>
  </Transition>
</template>

<script setup>
const show = ref(false)
const msg= ref('操作成功')
const message=(msg)=>{
  console.log(msg)
  show.value = true
  setTimeout(() => {
    show.value = false
  }, 3000)
}
defineExpose({
  message
})
</script>

<style scoped>
.toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #7e22ce;
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

.icon {
  color: #fde047;
  display: flex;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>